<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js 奶茶点单程序</title>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    /* ===== 一些简单的CSS美化 ===== */

    body {
      font-family: "Microsoft YaHei", sans-serif;
      margin: 20px;
      background: #f8f8f8;
    }
    h1, h2, h3 {
      margin: 10px 0;
    }
    hr {
      margin: 15px 0;
    }

    /* 小按钮样式 */
    button {
      cursor: pointer;
      border: none;
      padding: 6px 10px;
      margin: 0 5px;
      border-radius: 4px;
      background-color: #5cb85c;
      color: #fff;
    }
    button:hover {
      background-color: #4cae4c;
    }

    /* 奶茶商品列表卡片 */
    .tea-item {
      background: #fff;
      border-radius: 5px;
      padding: 10px;
      margin: 8px 0;
      box-shadow: 0 0 4px rgba(0,0,0,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* 购物车列表 */
    ul {
      list-style-type: none;
      padding-left: 0;
    }
    li {
      margin: 5px 0;
    }

    /* ===== 过渡动画相关CSS ===== */
    /* fade-enter-active 和 fade-leave-active 决定动画时长、过渡属性等 */
    .fade-enter-active, .fade-leave-active {
      transition: all 0.5s ease;
    }
    /* fade-enter 和 fade-leave-to 决定元素进入前和离开后的状态 */
    .fade-enter, .fade-leave-to {
      opacity: 0;
      transform: translateY(-10px);
    }
  </style>
</head>

<body>
<div id="app">
  <!-- 全局组件：页面头部 -->
  <app-header></app-header>

  <hr />

  <!-- 局部组件：菜单列表 -->
  <milk-tea-list 
    :tea-list="milkTeaList"
    @add-to-cart="addToCart">
  </milk-tea-list>

  <hr />

  <!-- 购物车信息显示 -->
  <h3>购物车</h3>
  <p>当前共：{{ cartCount }} 杯奶茶</p>
  <p>合计：{{ cartTotalPrice }} 元</p>
  <button @click="clearCart">清空购物车</button>

  <!-- 用 transition-group 给购物车列表添加动画 -->
  <transition-group name="fade" tag="ul">
    <li v-for="(item,index) in cart" :key="item.id">
      {{ item.name }} - {{ item.price }}元
    </li>
  </transition-group>
</div>

<script>
  /*
   * 1. 全局组件：头部标题
   *    使用 Vue.component(...) 进行注册
   */
  Vue.component('app-header', {
    template: `
      <header>
        <h2>下午三点半</h2>
        <p>出来饮茶啦！</p>
      </header>
    `
  });

  /*
   * 2. 局部组件：奶茶菜单列表
   *    - 通过 props 接收父组件传来的数据
   *    - 通过 $emit 向父组件发送事件（“添加到购物车”）
   */
  var MilkTeaList = {
    props: ['teaList'],
    template: `
      <div>
        <h3>奶茶菜单</h3>
        <div v-for="tea in teaList" :key="tea.id" class="tea-item">
          <span>{{ tea.name }} - {{ tea.price }}元</span>
          <button @click="addItem(tea)">加入购物车</button>
        </div>
      </div>
    `,
    methods: {
      addItem(tea) {
        // 子组件把选中的茶通过事件通知父组件
        this.$emit('add-to-cart', tea);
      }
    }
  };

  /*
   * 3. Vue 根实例
   *    - 存放奶茶列表数据、购物车数据
   *    - 监听从子组件发来的 add-to-cart 事件
   */
  var vm = new Vue({
    el: '#app',
    data: {
      milkTeaList: [
        { id: 1, name: '原味奶茶', price: 5 },
        { id: 2, name: '红豆奶茶', price: 6 },
        { id: 3, name: '珍珠奶茶', price: 7 },
        { id: 4, name: '奥利奥奶茶', price: 8 },
        { id: 5, name: '波霸奶茶', price: 9 }
      ],
      cart: []  // 用来存储加入购物车的奶茶
    },
    components: {
      // 在此局部注册milk-tea-list组件
      'milk-tea-list': MilkTeaList
    },
    computed: {
      // 购物车中数量
      cartCount() {
        return this.cart.length;
      },
      // 购物车中总价
      cartTotalPrice() {
        return this.cart.reduce((sum, item) => sum + item.price, 0);
      }
    },
    methods: {
      // 当子组件触发add-to-cart事件时，调用此方法
      addToCart(tea) {
        this.cart.push(tea);
      },
      // 清空购物车
      clearCart() {
        this.cart = [];
      }
    }
  });
</script>
</body>
</html>
